import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import styles from './index.less';
// 接收隐式传参 引入hook userLocation
// import { useLocation, useMatch, useParams } from '@umijs/max';
// import { useSearchParams } from '@umijs/max';
// useSearchParams 拿到当前页面所有的查询参数
const HomePage: React.FC = () => {
  // 路由演示
  // 地址信息
  // const location = useLocation();
  // 隐式传递过来的参数在 location 中的state中
  // console.log(window.location, location);

  // 路由组件参数
  //   {
  //   name: '首页',
  //   path: '/home:id',
  //   component: './Home', // 相对路径慧自动根据pages文件夹寻找
  // },
  // 动态传输和地址效信息
  // const match = useMatch('/home:id'); // 参数为地址带通配符的 path
  // 动态参数信息
  // const params = useParams();
  // console.log('match', match); // 数据包含 params
  // console.log('params', params); // id:传入的id

  // 地址栏查询参数信息
  // const [searchParams, setSearchParams] = useSearchParams();
  // searchParams 表示地址栏查询数据
  // setSearchParams 表示修改地址栏查询数据
  // console.log(searchParams.get('id')); // 拿取传递的查询参数需要使用 searchParams.get('参数字段名称')
  // setSearchParams({ name: 'lisi' });

  //
  const { name } = useModel('global');
  return (
    <PageContainer ghost>
      <div className={styles.container}>
        <Guide name={trim(name)} />
      </div>
    </PageContainer>
  );
};

export default HomePage;
